<script setup>
import {onMounted, ref} from "vue";
import {router} from "../../router/index.js";
import axios from "axios";
import {useRoute} from "vue-router";
import {ElMessage} from "element-plus";

const search=ref()
const id= ref()
const route = useRoute()
const filteredCars=ref([])
const currentProduct=ref({})


const getCarModel=()=>{
  axios.get(`/carcenter-service-order/products/match/${id.value}`).then(resp=>{
    if (resp.data.code===200){
      filteredCars.value=resp.data.data
      ElMessage.success("已匹配车型")
    }else {
      ElMessage.error(resp.data.message)
    }
  })
}
const getProduct=()=>{
  axios.get(`/carcenter-service-order/products/getProduct/${id.value}`).then(resp=>{
    currentProduct.value=resp.data.data
  })
}
const batchDelete =()=>{

}
const addCar = ()=>{

}
onMounted(()=>{
  id.value=route.query.id
  getProduct();
  getCarModel();
})
</script>

<template>
  <div class="matched-cars-table">
    <h2>匹配车型</h2>
    <p>匹配配件：{{currentProduct.productName}}</p>

    <el-input v-model="search" placeholder="请输入品牌/车型/车系" style="width: 300px; margin-right: 10px;" />
    <el-button type="danger" @click="addCar">添加车型</el-button>
    <el-button @click="batchDelete">批量删除</el-button>

    <el-table :data="filteredCars" border style="width: 100%; margin-top: 20px;">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="carCode" label="车型编号" />
      <el-table-column prop="carBrand" label="品牌" />
      <el-table-column prop="carService" label="车系" />
      <el-table-column prop="productionYear" label="生产年份" />
      <el-table-column prop="model" label="车型" />
      <el-table-column prop="capacity" label="容量" />
      <el-table-column prop="viscosityFit" label="适配粘度" />
      <el-table-column prop="displacement" label="排量" />
      <template #empty>
        <div style="text-align: center; padding: 20px;">
          <i class="iconfont icon-meiyoupipeicheliang" style="font-size: 80px"></i>
          <p>暂无数据</p>
        </div>
      </template>
    </el-table>

    <div style="display: flex; justify-content: flex-end; margin-top: 20px;">
      <el-button @click="$router.back()">返回</el-button>
    </div>
  </div>
</template>

<style scoped>

</style>